<template>
  <Card :bordered="false" dis-hover>
    <Form class="ivu-mb-8"
      ><Button
        type="primary"
        v-hasC="{
          name: 'v1-content-classify-create2',
          flag: 'v1/content/classify/create',
        }"
        @click="handleAdd()"
        >新增</Button
      ></Form
    >
    <Table
      row-key="id"
      :columns="columns"
      :data="list"
      :loading="loading"
      border
    >
      <template #status="{ row }">
        <Badge v-if="row.status == 1" status="success" text="正常" />
        <Badge v-if="row.status == 0" status="processing" text="停用" />
      </template>
      <template #type="{ row }">
        <Tag v-if="row.type == 1" color="success">列表</Tag>
        <Tag v-if="row.type == 2" color="primary">单页</Tag>
      </template>
      <!-- <template #model="{ row }">
        <Tag v-if="row.model === 0">科普</Tag>
        <Tag v-if="row.model === 1">活动</Tag>
        <Tag v-if="row.model === 2">视频</Tag>
      </template> -->
      <template #action="{ row }">
        <a
          @click="handleAdd(row)"
          v-hasC="{
            name: 'v1-content-classify-addchild2',
            flag: 'v1/content/classify/addchild',
          }"
          v-if="row.pid == 0"
          >添加子类</a
        >
        <Divider type="vertical"></Divider>
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-content-classify-edit2',
            flag: 'v1/content/classify/edit',
          }"
          >编辑</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-content-classify-edit2',
            flag: 'v1/content/classify/edit',
          }"
        ></Divider>
        <a
          @click="handleDelete(row)"
          v-hasC="{
            name: 'v1-content-classify-delete2',
            flag: 'v1/content/classify/delete',
          }"
          class="delete"
          >删除</a
        >
      </template>
    </Table>
    <Modal
      :title="add == 'add' ? '新增' : '编辑'"
      width="960"
      v-model="Modal"
      :mask-closable="false"
      :draggable="true"
      footer-hide
    >
      <classify
        :modalType="add"
        :editInfo="editInfo"
        @refresh="refreshData"
        ref="addChannel"
      />
      <div slot="footer" class="modalFoot">
        <Button @click="canceledit()">取消</Button>
        <Button type="primary" @click="sendData" class="ivu-ml-16">确定</Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import { articleList, listsDelete } from "@/api/jzy.js"
import classify from "@/components/admin/classify"
export default {
  name: "classIfy",
  components: { classify },
  data () {
    return {
      add: "add",
      loading: false,
      total: 0,
      Modal: false,
      current: 1,
      pageOpts: [10, 15, 20, 30, 50],
      params: {
        current: 1,
        pageSize: 10,
      },
      columns: [
        {
          title: "id",
          key: "id",
          width: 80,
        },
        {
          title: "名称",
          key: "name",
          minWidth: 150,
          tree: true,
        },
        {
          title: "类型",
          slot: "type",
          width: 95,
        },
        // {
        //   title: "模型",
        //   slot: "model",
        //   width: 95,
        // },
        {
          title: "文档数",
          key: "number",
          width: 80,
        },
        {
          title: "排序",
          key: "sort",
          width: 80,
        },
        {
          title: "状态",
          slot: "status",
          width: 80,
        },
        {
          title: "操作",
          slot: "action",
          width: 188,
          fixed: "right",
        },
      ],
      list: [],
      editInfo: {},
    }
  },
  methods: {
    getData () {
      this.loading = true
      articleList()
        .then((res) => {
          this.list = res
        })
        .finally(() => {
          this.loading = false
        })
    },
    refreshData (e) {
      this.Modal = e
      this.getData()
    },
    canceledit (name) {
      this.Modal = false
    },
    handleAdd (e) {
      this.add = "add"
      this.Modal = true
      if (e) {
        this.editInfo = {}
        this.editInfo.pid = e.id
        this.add = "addChild"
      } else {
        this.editInfo = {}
      }
    },
    handleEdit (e) {
      this.add = "edit"
      this.Modal = true
      this.editInfo = e
    },
    handleDelete (e) {
      this.$Modal.confirm({
        title: "温馨提示",
        content: "确定删除此项?",
        onOk: () => {
          listsDelete({ id: e.id }).then((res) => {
            // console.log(res);
            this.getData()
          })
        },
      })
    },
    sendData () {
      this.$refs.addChannel.saveData()
    },
  },
  mounted () {
    this.getData()
  },
};
</script>
<style lang='less' scoped>
.delete {
  color: rgb(226, 5, 5);
}
.modalFoot {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 16px;
  margin-top: 24px;
}
</style>
